<!DOCTYPE html>
<html>

<html lang="zh">
<meta charset="UTF-8">
<title></title>
<style>
    .box {
        width: 300px;
        height: 440px;
        margin: 100px auto;
        position: relative;
    }

    img {
        position: absolute;
        transform-origin: center bottom;
        width: 100%;
        transition: all 1.5s;
    }

    .box:hover img:nth-child(1) {
        transform: rotate(-60deg);
    }

    .box:hover img:nth-child(2) {
        transform: rotate(-50deg);
    }

    .box:hover img:nth-child(3) {
        transform: rotate(-40deg);
    }

    .box:hover img:nth-child(4) {
        transform: rotate(-30deg);
    }

    .box:hover img:nth-child(5) {
        transform: rotate(-20deg);
    }

    .box:hover img:nth-child(6) {
        transform: rotate(-10deg);
    }

    .box:hover img:nth-child(7) {
        transform: rotate(0deg);
    }

    .box:hover img:nth-child(8) {
        transform: rotate(10deg);
    }

    .box:hover img:nth-child(9) {
        transform: rotate(20deg);
    }

    .box:hover img:nth-child(10) {
        transform: rotate(30deg);
    }

    .box:hover img:nth-child(11) {
        transform: rotate(40deg);
    }

    .box:hover img:nth-child(12) {
        transform: rotate(50deg);
    }

    .box:hover img:nth-child(13) {
        transform: rotate(60deg);
    }
</style>
</head>

<body>
    <div class="box">
        <img src="https://img.haruka.net.cn/image/2024/10/25/zoilws.png" />
        <img src="https://img.haruka.net.cn/image/2024/10/25/zoiwt6.png" />
        <img src="https://img.haruka.net.cn/image/2024/10/25/zoftne.png" />
        <img src="https://img.haruka.net.cn/image/2024/10/25/zofx5a.png" />
        <img src="https://img.haruka.net.cn/image/2024/10/25/zofwir.png" />
        <img src="https://img.haruka.net.cn/image/2024/10/25/zog50b.png" />
        <img src="https://img.haruka.net.cn/image/2024/10/25/zog1ku.png" />
        <img src="https://img.haruka.net.cn/image/2024/10/25/zofyxd.png" />
        <img src="https://img.haruka.net.cn/image/2024/10/25/zog2te.png" />
        <img src="https://img.haruka.net.cn/image/2024/10/25/zog1d2.png" />
        <img src="https://img.haruka.net.cn/image/2024/10/25/zog92o.png" />
        <img src="https://img.haruka.net.cn/image/2024/10/25/zogcij.png" />
        <img src="https://img.haruka.net.cn/image/2024/10/25/zogbd2.png" />
    </div>
</body>

</html>